<template xmlns="">
  <div ref="divDom" id="cesiumContainer">
  </div>
  <LeftSideBlock ref="leftSideBlock" ></LeftSideBlock>
  <RightSideBlock></RightSideBlock>
  <topPanel class="headerFaceplate" ></topPanel>
  <el-card class="dialogBlockClass" id="dialogBlock" >
    <div >
      {{ title }}
    </div>
<!--    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"  alt="">-->
    <video  controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
<!--      <source src="movie.ogg" type="video/ogg">-->
      您的浏览器不支持 video 标签。
    </video>
  </el-card>

  <el-card class="dialogBlockClass" id="InfoDialog" >
    <div >
      {{ dialogInfo.title }}
    </div>
<!--        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"  alt="">-->
      <img :src="dialogInfo.url"  alt="">
    <div class="infoList" >
      <div><span>名称</span><span>{{ dialogInfo.title }}</span></div>
    </div>
  </el-card>
  <el-card class="dialogBlockClass" id="InfoDialogClick" >
    <div >
      {{ dialogInfo.title }}
    </div>
    <!--        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"  alt="">-->
    <img :src="dialogInfo.url"  alt="">
    <div class="infoList" >
      <div><span>乡镇</span><span>{{ dialogInfo.info.乡镇 }}</span></div>
      <div><span>地块编</span><span>{{ dialogInfo.info.地块编 }}</span></div>
      <div><span>机埠</span><span>{{ dialogInfo.info.机埠 }}</span></div>
      <div><span>样品名</span><span>{{ dialogInfo.info.样品名 }}</span></div>
      <div><span>种植季</span><span>{{ dialogInfo.info.种植季 }}</span></div>
      <div><span>种植年</span><span>{{ dialogInfo.info.种植年 }}</span></div>
      <div><span>种植类</span><span>{{ dialogInfo.info.种植类 }}</span></div>
      <div><span>管理者</span><span>{{ dialogInfo.info.管理者 }}</span></div>
      <div><span>面积亩</span><span>{{ dialogInfo.info.面积亩 }}</span></div>
    </div>
  </el-card>
</template>

<script >
import {onMounted, reactive, ref, toRefs} from "vue";
import colorChange from "./untils/color";
import CesiumNavigation from 'cesium-navigation-es6'
import TopPanel from "@/components/header/topPanel.vue";
import RightSideBlock from "@/components/baseSideBlock/RightSideBlock.vue";
import LeftSideBlock from "@/components/baseSideBlock/LeftSideBlock.vue";
import InfoWindow from "@/untils/InfoWindow.js";

let viewer;
let popupObj = null;

export default {
  name: "Home",
  components: {LeftSideBlock, RightSideBlock, TopPanel},
  setup() {
    let state = reactive({
      title:'sdfs',
      url:"",
      dialogInfo:{
        title:'sdfs',
        url:"",
        info:{}
      }
    })
    const leftSideBlock = ref();
    const Cesium = window.Cesium;
    let initMap = () => {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYjkzOGI5OC0yM2EyLTQyYTktYTNjOS04NmJiZTdlMTIyODMiLCJpZCI6MzUwMDgsImlhdCI6MTYwMTIxMzE4Mn0.X8UxIfOTe0EgnpVTzQhmJIJLjsHt9NcIBzNroVpl5Nc';
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
          115,
          27,
          126,
          31.8
      );
      Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.01; //缩放比例
      viewer = window.Viewer = new Cesium.Viewer("cesiumContainer", {
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        vrButton: false,
        //关闭点选出现的提示框
        selectionIndicator: false,
        infoBox: false,
      });
      viewer.terrainProvider = Cesium.createWorldTerrain({
        // requestWaterMask: true, // 请求水体效果所需要的海岸线数据
        // requestVertexNormals: true, // 请求地形照明数据
      });
      viewer.scene.debugShowFramesPerSecond = false;
      viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
      viewer.scene.globe.baseColor = Cesium.Color.BLACK;

      viewer.scene.screenSpaceCameraController.minimumZoomDistance = 2000;
      viewer.scene.screenSpaceCameraController.maximumZoomDistance = 5000000;

      new CesiumNavigation(viewer, {});  //罗盘
    };

    //添加边界
    async function addArea() {
      await fetch(`./data/zjline.json`, {
        method: "get",
        headers: { "Content-Type": "application/json" }
      })
        .then(response => response.json())
        .then(res => {
          let colors = ["#006D2CDA", "#41AB5DB3", "#A1D99B8B", "#E5F5E066"];
          let primitiveArr = [];
          res.geometry.coordinates.forEach((EE, I) => {
            let areaArr = { leave0: [], leave1: [], leave2: [], leave3: [] };
            EE.forEach((E, I) => {
              areaArr.leave0.push(E[0], E[1], 0);
              areaArr.leave1.push(E[0], E[1], 600);
              areaArr.leave2.push(E[0], E[1], 1200);
              areaArr.leave3.push(E[0], E[1], 1800);
            });
            for (let i = 0; i < 4; i++) {
              let primitive = new Cesium.Primitive({
                geometryInstances: new Cesium.GeometryInstance({
                  geometry: new Cesium.PolylineGeometry({
                    positions: Cesium.Cartesian3.fromDegreesArrayHeights(
                        areaArr["leave" + i]
                    ),
                    width: 3,
                    vertexFormat:
                    Cesium.PolylineMaterialAppearance.VERTEX_FORMAT
                  })
                }),
                appearance: new Cesium.PolylineMaterialAppearance({
                  material: Cesium.Material.fromType(
                    Cesium.Material.PolylineDashType,
                    {
                      color: Cesium.Color.fromCssColorString(colors[i]), //线条颜色
                      gapColor: Cesium.Color.TRANSPARENT, //间隔颜色
                      dashLength: 0, //短划线长度
                      dashPattern: 255
                    }
                  )
                })
              });
              viewer.scene.primitives.add(primitive);
              primitiveArr.push(primitiveArr)
            }
          });
          return primitiveArr
        })
    }

    // 地图点击弹窗
    function clickMap(){
      const clickEvent = new Cesium.ScreenSpaceEventHandler(
          window.Viewer.scene.canvas,
      );
      clickEvent.setInputAction((movement) => {
        const pickedObjects = window.Viewer.scene.pick(movement.position);
        if (popupObj) {
          popupObj.remove();
          popupObj = null;
        }
        if (Cesium.defined(pickedObjects)) {
          const entity = Cesium.defaultValue(
              pickedObjects.id,
              pickedObjects.primitive.id,
          ); // 获取选取的对象
          if(entity._billboard){
            let type = entity.name.split(',')[1]
            console.log(entity)
            if(type === 'xmzs'){
              pointClickInfo(entity.position._value,entity.properties)
            }else  if(type === 'sdbh'){
              pointClickInfo(entity.position._value,entity.properties)
            }else  if(type === 'cskjc'){
              pointClickInfo(entity.position._value,entity.properties)
            }else  if(type === 'lsbt'){
              pointClickInfo(entity.position._value,entity.properties)
            }else  if(type === 'sp'){
              pointClickVideo(entity)
            }else  if(type === 'tr'){
              pointClickVideo(entity)
            }else  if(type === 'bcjc'){
              pointClickVideo(entity)
            }else  if(type === 'tlj'){
              pointClickVideo(entity)
            }else  if(type === 'sgj'){
              pointClickVideo(entity)
            }else  if(type === 'wrj'){
              pointClickVideo(entity)
            }
          }else if(entity._polygon){
            let type = entity.name.split(',')[1]
            if(type === 'ntfb'){
              let polyPositions = entity._polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
              let polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;//中心点
              polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
              pointClickClick(polyCenter,entity.properties);
            }else if(type === 'xmzs'){
              let polyPositions = entity._polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
              let polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;//中心点
              polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
              pointClickClick(polyCenter,entity.properties);
            }else {

            }
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }
    function pointClickInfo(center,properties){
      popupObj = new InfoWindow(viewer, "InfoDialog");
      popupObj.setContentconTainHeigh(
          "",
          center
      ); //带高度 笛卡尔三维坐标
      popupObj.createInfoWindow(true);
      state.dialogInfo.title = properties.name;
      state.dialogInfo.url = properties.url;
    }
    function pointClickVideo(entity){
      popupObj = new InfoWindow(viewer, "dialogBlock");
      popupObj.setContentconTainHeigh(
          "",
          entity.position._value
      ); //带高度 笛卡尔三维坐标
      popupObj.createInfoWindow(true);
      state.title = entity.properties.name;
      state.url = entity.properties.url;
    }
    function pointClickClick(polyCenter,properties){
      popupObj = new InfoWindow(viewer, "InfoDialogClick");
      popupObj.setContentconTainHeigh(
          "",
          polyCenter
      ); //带高度 笛卡尔三维坐标
      popupObj.createInfoWindow(true);
      state.dialogInfo.title = properties.地块编;
      state.dialogInfo.url = properties.picurl;
      state.dialogInfo.info = properties;
      console.log(state.dialogInfo.info)
    }

    // 地图改色
    onMounted(()=>{
      initMap()
      clickMap()
      addArea()
      // colorChange(
      //   viewer,
      //   {
      //     invertColor: true, //颜色翻转
      //     filterRGB: [40, 55, 80]
      //   } //颜色过滤
      // )
    });
    return {
      ...toRefs(state),
    }
  },
};
</script>

<style lang="scss" scoped>

.wxm-bg-image {
  background-repeat: no-repeat;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}

#cesiumContainer {
  position: relative;
  width: 100%;
  height: 100%;
}
.headerFaceplate{
  width: 100%;
  left: 0;
  top: 0;
  height: 65px;
}
.dialogBlockClass{
  display: none;
  position: absolute;
  top: 10%;
  left: 50%;
  border: 0;
  //height: 200px;
  width: 300px;
  background-image: url("@/assets/img/bgImg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  :deep(.el-card__body){
    padding: 4px 20px;
    height: calc(100% - 8px);
    >:nth-child(1){
      font-weight: 600;
      font-size: 16px;
      color: #D1D6DF;
      line-height: 23px;
      font-style: italic;
    }
    >:nth-child(2){
      //height: calc(100% - 23px);
      width: 100%;
      margin: 12px 0 0 0;
    }
  }
}
.infoList{
  font-weight: 500;
  font-size: 14px;
  color: #D1D6DF;
  line-height: 20px;
  font-style: italic;
  >div{
    display: flex;
    justify-content: space-around;
    >:first-child{
      font-weight: 600;
    }
  }
}
//#InfoDialogClass{
//
//}
</style>
<style>
.compass{
  top: calc(10% + 100px);
  right: 22%;
}
.navigation-controls{
  top: calc(10% + 210px);
  right: calc(22% + 30px);
}
</style>